<template>
  <div class="login">
    <van-nav-bar>
      <template #title>
        <h3 class="title">漫单漫画</h3>
      </template>
      <template #right>
        <span class="register" @click="goRegister">注册</span>
      </template>
    </van-nav-bar>
    <div class="logo">
      <img src="../assets/logo.png" alt />
    </div>
    <van-form @submit="Login">
      <van-field
        v-model="userinfo.phone"
        name="phone"
        label="手机号"
        autocomplete="off"
        placeholder="输入你的手机号"
        :rules="[{ required: true, message: '请填写手机号' },{ pattern:/^1[3456789]\d{9}$/, message: '请填写正确手机号格式' }]"
      />
      <van-field
        v-model="userinfo.password"
        :type="isClose?'text':'password'"
        name="password"
        label="密码"
        autocomplete="off"
        placeholder="输入你的密码"
        :rules="[{ required: true, message: '请填写密码' },{ pattern:/^[a-zA-Z0-9_-]{4,16}$/, message: '密码格式错误' }]"
        :right-icon="isClose?'eye-o':'closed-eye'"
        @click-right-icon="showPassword"
      />
      <div class="forget">
        <span>忘记密码?</span>
      </div>
      <div style="margin: 16px;">
        <van-button round block color="#5c55ff" native-type="submit">登录</van-button>
      </div>
    </van-form>
    <div class="tips">
      <span>提示:</span>
      <p>1.输入11位数的手机号</p>
      <p>2.输入以字母开头的4~16位的密码</p>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Login",
  data() {
    return {
      userinfo: {
        phone: "",
        password: ""
      },
      isClose: false
    };
  },
  methods: {
    Login() {
      let users = localStorage.getItem("userinfo");
      if (users) {
        let userPassword = "";
        let isHas = false;
        users = JSON.parse(users);
        for (let i = 0; i < users.length; i++) {
          if (users[i].phone === this.userinfo.phone) {
            isHas = true;
            userPassword = users[i].password;
            break;
          }
        }
        if (isHas) {
           if(userPassword===this.userinfo.password){
            //保存登录状态,再次登录判断是否为1,为1则不需登录,为0则需要重新登录
              localStorage.setItem("isLogin",JSON.stringify(1));
              this.$store.commit("getIsLogin",1)
              Toast("登录成功!")
              setTimeout(()=>{
                  let path=localStorage.getItem("path")
                  if(path){
                    this.$router.push(JSON.parse(path)) 
                  }else{
                    this.$router.push("/home")
                  }
              },2000)
           }else{
              Toast("密码错误!")
           }
        }else{
          Toast("该手机号未注册!")
        }
      }
    },
    goRegister() {
      this.$router.push("/register");
    },
    //显示密码
    showPassword() {
      this.isClose = !this.isClose;
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  .title,
  .register {
    color: #333;
  }
  .logo {
    text-align: center;
    height: 180px;
    padding-top: 50px;
    box-sizing: border-box;
  }
  .forget {
    display: flex;
    margin: 10px 10px;
    span {
      margin-left: auto;
      font-size: 14px;
      color: #aaa;
      cursor: pointer;
    }
  }
  ::v-deep .van-button {
    margin-top: 45px;
  }
  .tips {
    padding: 10px;
    color: #aaa;
    margin-top: 20px;
  }
}
</style>